<!--
  @文件名： configCom
  @来源：YongPing.Wang|2023/11/19 20:50
  @描述：配置
-->
<template>
  <transition enter-active-class="animate__animated animate__fadeInRight" leave-active-class="animate__animated animate__fadeOutRight">
    <div class="configCom" v-if="isShowConfig">
      <div
        class="configCom-main"
        :style="{
          boxShadow: layoutInfoStore.platformLayout === 1 ? (layoutInfoStore.platformTheme === 'defaultSkin' ? `var(--el-box-shadow)` : `var(--LG-layout-config-boxColor2)`) : `var(--LG-layout-config-boxColor2)`,
          color: layoutInfoStore.platformLayout === 1 ? `var(--LG-layout-config-color1)` : `var(--LG-layout-config-color2)`,
          backgroundColor: layoutInfoStore.platformLayout === 1 ? `var(--LG-layout-config-bgColor1)` : `var(--LG-layout-config-bgColor2)`,
        }"
      >
        <div class="configCom-main-head">
          <el-icon @click="setConfigHandle"><Close /></el-icon>
        </div>
        <div class="configCom-main-body">
          <el-collapse v-model="collapseValue">
            <el-collapse-item name="1">
              <template #title>
                <div class="head">{{ $t('LG.baseModel.systemTheme') }}</div>
              </template>
              <div class="body">
                <el-select v-model="themeValue" :placeholder="$t('LG.baseModel.selectTheme')" @change="changeTheme">
                  <el-option v-for="item in platformThemeList" :key="item.value" :label="$t(`LG.baseModel.${item.code}`)" :value="item.value" />
                </el-select>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <div class="head">{{ $t('LG.baseModel.systemLayout') }}</div>
              </template>
              <div class="body">
                <div
                  class="layoutBox"
                  :style="{
                    color: layoutInfoStore.platformLayout === 1 ? `var(--LG-layout-config-color1)` : `var(--LG-layout-config-color2)`,
                  }"
                >
                  <div :class="item.value === layoutValue && 'active'" @click="changeLayout(item.value)" class="layoutBox-item" v-for="item in platformLayoutList" :key="item.value">
                    <el-image class="LG-w100" style="height: 80px" :src="item.url" />
                    <div class="title">
                      {{ $t(`LG.baseModel.${item.code}`) }}
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
  import { ref, watchEffect } from 'vue'
  import { layoutInfo } from '@/store/layoutInfo.ts'
  import { Close } from '@element-plus/icons-vue'
  import { platformThemeList } from '@/theme/constants.ts'
  import { type EPlatformTheme } from '@/theme/types.ts'
  import { platformLayoutList } from '@/store/constants.ts'
  import { type EPlatformLayout } from '@/store/types.ts'

  const layoutInfoStore = layoutInfo()

  const collapseValue = ref(['1', '2'])

  // 主题和主题切换
  const themeValue = ref<EPlatformTheme>(layoutInfoStore.platformTheme)
  const changeTheme = (e: EPlatformTheme): void => {
    themeValue.value = e
    layoutInfoStore.setPlatformTheme(e)
  }

  // 布局和布局切换
  const layoutValue = ref<EPlatformLayout>(layoutInfoStore.platformLayout)
  const changeLayout = (e: EPlatformLayout): void => {
    layoutValue.value = e
    layoutInfoStore.setPlatformLayout(e)
  }

  // 切换配置
  const isShowConfig = ref(false)
  const changeConfig = (): void => {
    isShowConfig.value = layoutInfoStore.platformConfigOpen
  }
  watchEffect(changeConfig)
  const setConfigHandle = (): void => {
    layoutInfoStore.setPlatformConfigOpen(false)
  }

  // 设置主题
</script>

<style scoped lang="scss">
  .configCom {
    position: fixed;
    z-index: 3;
    height: 100%;
    right: 0;
    top: 0;
    ::v-deep(.el-collapse-item__header) {
      background-color: transparent;
      color: unset;
    }
    ::v-deep(.el-collapse-item__wrap) {
      background-color: transparent;
    }
    .configCom-main {
      width: 400px;
      height: 100%;
      .configCom-main-head {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        font-size: 18px;
        .el-icon {
          cursor: pointer;
        }
      }
      .configCom-main-body {
        height: calc(100% - 50px);
        .head {
          padding-left: 10px;
        }
        .body {
          padding: 0 10px;
        }
      }
    }
    .layoutBox {
      display: flex;
      align-items: center;
      .layoutBox-item {
        width: 33.33%;
        cursor: pointer;
        padding: 5px 5px;
        .title {
          font-size: 13px;
          text-align: center;
        }
      }
      .active {
        .title {
          color: $LG-base-color;
        }
      }
    }
  }
</style>
